<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <el-text>统计数据</el-text>
        <el-button link type="primary" @click="handleDataStat">刷新</el-button>
      </div>
    </template>
    <div class="stat-data">
      <div style="width: 60%">
        <el-row justify="start">
          <el-col :span="8">
            <router-link to="/common/order">
              <el-statistic title="总订单数" :value="toInteger(statData.orderSum)" />
            </router-link>
          </el-col>
          <el-col :span="8">
            <router-link to="/common/order">
              <el-statistic title="今天订单数" :value="statData.todayOrder" />
            </router-link>
          </el-col>
          <el-col :span="8">
            <router-link to="/common/order">
              <el-statistic title="昨天订单数" :value="statData.yesterdayOrder" />
            </router-link>
          </el-col>
          <el-col :span="8">
            <router-link to="/common/order">
              <el-statistic title="总收入" :precision="2" :value="statData.orderMoney" :prefix="'￥'" />
            </router-link>
          </el-col>
          <el-col :span="8">
            <router-link to="/common/order">
              <el-statistic title="今天收入" :precision="2" :value="statData.todayMoney" :prefix="'￥'" />
            </router-link>
          </el-col>
          <el-col :span="8">
            <router-link to="/common/order">
              <el-statistic title="昨天收入" :precision="2" :value="statData.yesterdayMoney" :prefix="'￥'" />
            </router-link>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-divider direction="vertical" style="height: 100%" />
      </div>
      <div style="width: 20%">
        <el-row justify="space-between">
          <el-col :span="12">
            <router-link to="/common/users">
              <el-statistic title="总用户数" :value="toInteger(statData.userSum)" />
            </router-link>
          </el-col>
          <el-col :span="12">
            <router-link to="/exam/list">
              <el-statistic title="总考试数" :value="toInteger(statData.examSum)" />
            </router-link>
          </el-col>
          <el-col :span="12">
            <router-link to="/paper/list">
              <el-statistic title="总试卷数" :value="toInteger(statData.paperSum)" />
            </router-link>
          </el-col>
          <el-col :span="12">
            <router-link to="/paper/list">
              <el-statistic title="总试题数" :value="toInteger(statData.questionSum)" />
            </router-link>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-divider direction="vertical" style="height: 100%" />
      </div>
      <div style="width: 20%">
        <el-row justify="space-between">
          <el-col :span="24">
            <el-statistic title="在线用户数(5分钟内)" :value="toInteger(statData.onlineUser)" />
          </el-col>
          <el-col :span="24">
            <el-statistic title="在线考试人数(5分钟内)" :value="toInteger(statData.onlineUserExam)" />
          </el-col>
        </el-row>
      </div>
    </div>
  </el-card>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { dashboardApi } from '@/api/dashboard.js'
  import { toInteger } from 'lodash/lang.js'

  const statData = ref({})
  onMounted(async () => {
    await handleDataStat()
  })
  // 获取统计数据
  const handleDataStat = async () => {
    statData.value = await dashboardApi.dataStat()
  }
</script>
<style lang="scss" scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
  }
  .info {
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
  }

  .stat-data {
    display: flex;
    flex-direction: row;

    .el-col {
      margin-top: 20px;
    }
  }

  .stat-data > div:not(:nth-child(1)) {
    margin-left: 10px;
  }
</style>
